<template>
	<view class="edit-page">
		<view class="contentBox">
			<view class="tabBox" v-if="pageMode != 'edit'">
				<u-tabs :list="tabsList" :current="tabsIndex" @click="tabsChange" lineColor="#FE4F04"
					:scrollable="false" :itemStyle="{ padding: '22rpx 0' }" lineWidth="20"></u-tabs>
			</view>
			<view class="form-box">
				<!-- <view class="form-title">提交人信息</view> -->
				<view class="form-list">
					<!-- <view class="form-item" v-if="pageMode == 'edit'">
						<view class="title">类型</view>
						<view>{{ tabsList[tabsIndex].name }}</view>
					</view> -->
					<view class="form-item">
						<view class="title required">名称</view>
						<input v-model="dataForm.name" disabled placeholder="请输入名称" class="input" />
					</view>
					<view class="form-item">
						<view class="title required">价格</view>
						<input v-model="dataForm.price" disabled placeholder="请输入价格" class="input" type="digit" />
						<view class="unit">{{ meterUnitFormat(dataForm.type) }}</view>
					</view>
					<!-- <view class="form-item">
						<view class="title">编号</view>
						<input v-model="dataForm.sn" placeholder="请输入编号" class="input" type="digit" />
					</view> -->
					<view class="form-item">
						<view class="title">上次表量</view>
						<input v-model="dataForm.min_num" placeholder="请输入最低用量" class="input" type="digit" />
					</view>
					<view class="form-item">
						<view class="title">最新表值</view>
						<input v-model="dataForm.last_num" placeholder="请输入最新表值" class="input" type="digit" />
					</view>
					<!-- <view class="form-item">
						<view class="title">备注</view>
						<input v-model="dataForm.remark" placeholder="请输入备注信息" class="input" />
					</view> -->
				</view>
			</view>
			<view class="fillBox" style="height: 150rpx;"></view>
			<!-- 底部操作菜单 -->
			<view class="safe-bottom page-bottom" v-if="pageMode === 'edit' && dataForm.id">
				<view class="icon-box" @click="navigatorToRecord">
					<u-icon name="file-text" size="20" color="#444444"></u-icon>
					<view class="label">抄表记录</view>
				</view>
				<!-- <view class="icon-box" @click="deleteInstrument">
					<u-icon name="trash" size="20" color="#444444"></u-icon>
					<view class="label">删除仪表</view>
				</view> -->
				<view class="action-btn-group">
					<view class="action-btn" @click="confirmSave">保存</view>
				</view>
			</view>
			<view class="safe-bottom page-bottom" v-if="pageMode === 'add'">
				<view class="action-btn-group">
					<view class="action-btn" @click="confirmSave">保存</view>
				</view>
			</view>
			<view class="safe-bottom page-bottom" v-if="pageMode === 'edit' && !dataForm.id">
				<view class="action-btn-group">
					<view class="action-btn1" @click="deleteInfo">删除</view>
					<view class="action-btn2" @click="confirmSave">保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	boardDel
} from "@/api/landlord.js"
export default {
	data() {
		return {
			pageMode: "add", // 房间页面模式，add为新增，edit为编辑
			tabsList: [{
				name: '水表',
				type: 1,
			}, {
				name: '电表',
				type: 2,
			}, {
				name: '燃气',
				type: 3,
			}, {
				name: '热水',
				type: 4,
			}],
			tabsIndex: 0,
			dataForm: {
				name: "水表",
				type: 1, // 1:水表, 2:电表, 3:燃气, 4:热水
				price: "",
				sn: "",
				min_num: "",
				last_num: "",
				remark: "",
			},
		}
	},
	onLoad(options) {
		if (options && options.dataInfo) {
			this.dataForm = JSON.parse(options.dataInfo);
			this.pageMode = 'edit'; // 如果有数据则为编辑模式
			this.tabsIndex = this.tabsList.findIndex(item => item.type === this.dataForm.type);
			console.log(this.tabsIndex);
		}
	},
	methods: {
		navigatorToRecord() {
			console.log(this.dataForm)
			this.$Tips('/pages-landlord/meter-reading/meter-record?room_id=' + this.dataForm.room_id + '&type=' + this
				.dataForm.type)
		},
		deleteInstrument() {
			let that = this
			uni.showModal({
				confirmColor: "#FE4F04",
				content: "确认要删除此信息吗？",
				success(res) {
					if (res.confirm) {
						boardDel({
							id: that.dataForm.id
						}).then(res => {
							that.$Toast('删除成功');
							setTimeout(() => {
								uni.$emit('deleteRoomMeterInfo', that.dataForm);
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						})
					}
				}
			})
		},
		tabsChange(item) {
			this.tabsIndex = item.index
			this.dataForm.name = item.name
			this.dataForm.type = item.type
		},
		meterUnitFormat(type) {
			switch (type) {
				case 1:
					return '元/吨';
				case 2:
					return '元/度';
				case 3:
					return '元/立方米';
				case 4:
					return '元/升';
				default:
					return '';
			}
		},
		// 提交信息
		confirmSave() {
			//uni-app获取上个页面路径
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2];
			let prevPagePath = prevPage.route;
			console.log(prevPagePath);
			// if (prevPagePath == 'pages-landlord/room-manage/rental-registration') {
			// 	uni.$emit('selectRoomMeterInfo', this.dataForm);
			// } else {
			// 	uni.$emit('selectRoomMeterInfos', this.dataForm);
			// }
			uni.$emit('selectRoomMeterInfo', this.dataForm);
			uni.navigateBack({
				delta: 1
			})
		},
		// 删除信息
		deleteInfo() {
			this.$Toast('删除成功');
			setTimeout(() => {
				if (prevPagePath == 'pages-landlord/room-manage/rental-registration') {
					uni.$emit('deleteRoomMeterInfo', this.dataForm);
				} else {
					uni.$emit('deleteRoomMeterInfos', this.dataForm);
				}
				// uni.$emit('deleteRoomMeterInfo', this.dataForm);
				uni.navigateBack({
					delta: 1
				})
			}, 1000)
		}
	}
}
</script>

<style lang="scss" scoped>
/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	width: 100%;
	bottom: 0rpx;
	z-index: 95;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: #ffffff;
	border-radius: 16rpx;
	padding: 20rpx;
	box-sizing: border-box;

	button {
		margin: unset;
		padding: unset;
		background-color: #ffffff;
	}

	button::after {
		border: none;
	}

	.icon-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		color: #333333;
		margin-right: 48rpx;

		.label {
			font-size: 22rpx;
			color: #333333;
			margin-top: 6rpx;
		}
	}

	.action-btn-group {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		flex: 1;

		.action-btn {
			width: 100%;
			height: 88rpx;
			background: #FE4F04;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 79, 4, 0.5);
			font-weight: bold;
			font-size: 30rpx;
			color: #ffffff;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx
		}

		.action-btn1,
		.action-btn2 {
			width: 100%;
			height: 88rpx;
			font-weight: bold;
			font-size: 30rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			border: 2rpx solid #FE4F04;
		}

		.action-btn1 {
			color: #FE4F04;
			background: #fff;
			margin-right: 10rpx;
		}

		.action-btn2 {
			color: #fff;
			background: #FE4F04;
			margin-left: 10rpx;
		}
	}
}

.edit-page {
	width: 100%;
	min-height: 100vh;
	background-color: #F7F8FA;

	.contentBox {
		padding-bottom: 40rpx;

		.tabBox {
			min-height: 86rpx;
			margin: 24rpx 24rpx 0;
		}
	}
}

.form-box {
	background: #FFFFFF;
	padding: 34rpx 40rpx;
	border-radius: 16rpx;
	margin: 20rpx 32rpx;

	::v-deep .u-textarea {
		padding: 0;
	}

	.form-title {
		font-weight: bold;
		font-size: 30rpx;
	}

	.form-list {
		.form-item {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				width: 180rpx;
				font-size: 28rpx;
				color: #666666;
			}

			.required::after {
				content: '*';
				color: #FE4F04;
				padding-left: 10rpx;
				font-size: 28rpx;
				font-weight: bold;
			}

			.unit {
				font-size: 28rpx;
				color: #222222;
				margin-left: 20rpx;
			}

			.input {
				flex: 1;
				text-align: right;
			}

			.image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.form-item:last-child {
			border-bottom: 0;
		}
	}

}
</style>